{% block sw_order_line_items_grid %}
<sw-container
    type="row"
    class="sw-order-line-items-grid"
>

    {% block sw_order_line_items_grid_actions %}
    <sw-container
        class="sw-order-line-items-grid__actions-container"
        columns="1fr auto"
        gap="16px"
    >

        {% block sw_order_line_items_grid_line_item_filter %}
        <div align="left">
            <sw-card-filter
                ref="itemFilter"
                :placeholder="$tc('sw-order.createBase.placeholderSearchBarItem')"
                @sw-card-filter-term-change="onSearchTermChange"
            />
        </div>
        {% endblock %}

        {% block sw_order_line_items_grid_create_actions %}
        <div align="right">

            {% block sw_order_line_items_grid_create_actions_button_group %}
            <sw-button-group :disabled="isLoading || undefined">

                {% block sw_order_line_items_grid_add_existing_product %}
                <mt-button
                    class="sw-order-line-items-grid__actions-container-add-product-btn"
                    ghost
                    size="small"
                    :disabled="!editable || undefined"
                    variant="secondary"
                    @click="onInsertExistingItem"
                >
                    {{ $tc('sw-order.detailBase.buttonAddProduct') }}
                </mt-button>
                {% endblock %}

                {% block sw_order_line_items_grid_create_actions_dropdown %}
                <sw-context-button>
                    <template #button>
                        <mt-button
                            ghost
                            size="small"
                            square
                            variant="secondary"
                        >
                            <mt-icon
                                name="regular-chevron-down-xs"
                                decorative
                            />
                        </mt-button>
                    </template>

                    {% block sw_order_line_items_grid_create_actions_dropdown_menu_item %}
                    <sw-context-menu-item
                        v-tooltip.left="{
                            message: $tc('sw-privileges.tooltip.warning'),
                            disabled: editable,
                            showOnDisabledElements: true
                        }"
                        class="sw-order-line-items-grid__create-custom-item"
                        :disabled="!editable || undefined"
                        @click="onInsertBlankItem"
                    >
                        {{ $tc('sw-order.detailBase.buttonAddBlankProduct') }}
                    </sw-context-menu-item>
                    <sw-context-menu-item
                        v-tooltip.left="{
                            message: $tc('sw-privileges.tooltip.warning'),
                            disabled: canCreateDiscounts,
                            showOnDisabledElements: true
                        }"
                        class="sw-order-line-items-grid__can-create-discounts-button"
                        :disabled="!canCreateDiscounts || undefined"
                        @click="onInsertCreditItem"
                    >
                        {{ $tc('sw-order.detailBase.buttonAddCredit') }}
                    </sw-context-menu-item>
                    {% endblock %}

                </sw-context-button>
                {% endblock %}

            </sw-button-group>
            {% endblock %}

        </div>
        {% endblock %}

    </sw-container>
    {% endblock %}

    {% block sw_order_line_items_grid_grid %}
    <sw-data-grid
        ref="dataGrid"
        class="sw-order-line-items-grid__data-grid"
        identifier="sw-order-line-item-grid"
        :data-source="orderLineItems"
        :columns="getLineItemColumns"
        show-settings
        :show-selection="editable"
        :is-loading="isLoading"
        :allow-inline-edit="editable"
        :is-record-editable="(item) => !isPromotionItem(item)"
        @inline-edit-cancel="onInlineEditCancel"
        @inline-edit-save="onInlineEditSave"
        @selection-change="onSelectionChanged"
    >

        {% block sw_order_line_items_grid_grid_columns %}
        {% block sw_order_line_items_grid_grid_columns_label %}
        <template #column-label="{ item, isInlineEdit }">

            {% block sw_order_line_items_grid_grid_columns_label_inline_edit %}
            <sw-order-product-select
                v-if="isInlineEdit"
                name="sw-field--item-label"
                :sales-channel-id="salesChannelId"
                :tax-status="taxStatus"
                :item="item"
            />
            {% endblock %}

            {% block sw_order_line_items_grid_grid_columns_label_link %}
            <div
                v-else-if="!isInlineEdit && (isProductItem(item) || isContainerItem(item))"
                class="sw-order-line-items-grid__item-product"
            >

                {% block sw_order_line_items_grid_grid_columns_label_nested_modal_button %}
                <mt-button
                    v-if="hasChildren(item)"
                    v-tooltip="{ message: $tc('sw-order.detailBase.tooltipNestedLineItemsButton') }"
                    class="sw-order-line-items-grid__item-nested-indicator"
                    size="x-small"
                    variant="secondary"
                    @click="openNestedLineItemsModal(item)"
                >

                    {% block sw_order_line_items_grid_grid_columns_label_nested_modal_button_icon %}
                    <mt-icon
                        class="sw-order-line-items-grid__nested-indicator-icon"
                        name="regular-list-xs"
                        size="14px"
                    />
                    {% endblock %}

                </mt-button>
                {% endblock %}

                {% block sw_order_line_items_grid_column_payload_options %}
                {% block sw_order_line_items_grid_column_payload_options_link %}
                <router-link
                    v-if="item.payload && item.payload.options"
                    class="sw-order-line-items-grid__item-payload-options"
                    :title="$tc('sw-order.detailBase.contextMenuShowProduct')"
                    :to="{ name: 'sw.product.detail', params: { id: item.productId } }"
                >
                    <sw-product-variant-info :variations="item.payload.options">
                        <div class="sw-order-line-items-grid__item-label">
                            {{ item.label }}
                        </div>
                    </sw-product-variant-info>
                </router-link>
                {% endblock %}

                {% block sw_order_line_items_grid_column_payload_options_linkless %}
                <div
                    v-else
                    class="sw-order-line-items-grid__item-payload-options"
                >
                    <span class="sw-order-line-items-grid__item-label">
                        {{ item.label }}
                    </span>
                </div>
                {% endblock %}
                {% endblock %}

            </div>
            {% endblock %}

            {% block sw_order_line_items_grid_grid_columns_label_content %}
            <template v-else>
                <span class="sw-order-line-items-grid__item-label">
                    {{ item.label }}
                </span>
            </template>
            {% endblock %}

        </template>
        {% endblock %}

        {% block sw_order_line_items_grid_grid_columns_unit_price %}
        <template #column-unitPrice="{ item, isInlineEdit }">

            {% block sw_order_line_items_grid_grid_columns_unit_price_inline_edit %}
            <mt-number-field
                v-if="isInlineEdit && !itemCreatedFromProduct(item.id)"
                v-model="item.priceDefinition.price"
                name="sw-field--item-priceDefinition-price"
                placeholder="0"
                size="small"
                :min="getMinItemPrice(item.id)"
                :digits="order.itemRounding.decimals"
                number-align-end
                @update:model-value="checkItemPrice($event, item)"
            />
            {% endblock %}

            {% block sw_order_line_items_grid_grid_columns_unit_price_content %}
            <span v-else>{{ currencyFilter(item.unitPrice, order.currency.isoCode, order.itemRounding.decimals) }}</span>
            {% endblock %}

        </template>
        {% endblock %}

        {% block sw_order_line_items_grid_grid_columns_total_price %}
        <template #column-totalPrice="{ item }">

            {% block sw_order_line_items_grid_grid_columns_total_price_content %}
            <span>
                {{ currencyFilter(item.totalPrice, order.currency.isoCode, order.itemRounding.decimals) }}
            </span>
            {% endblock %}

        </template>
        {% endblock %}

        {% block sw_order_line_items_grid_grid_columns_quantity %}
        <template #column-quantity="{ item, isInlineEdit }">

            {% block sw_order_line_items_grid_grid_columns_quantity_inline_edit %}
            <mt-number-field
                v-if="isInlineEdit && !isCreditItem(item.id)"
                :model-value="item.quantity"
                name="sw-field--item-quantity"
                number-type="int"
                :min="1"
                size="small"
                placeholder="0"
                number-align-end
                @update:model-value="updateItemQuantity(item, $event)"
            />
            {% endblock %}

            {% block sw_order_line_items_grid_grid_columns_quantity_content %}
            <span v-else>
                {{ item.quantity }} x
            </span>
            {% endblock %}

        </template>
        {% endblock %}

        {% block sw_order_line_items_grid_grid_columns_tax %}

        <template #column-price.taxRules[0]="{ item, isInlineEdit }">

            {% block sw_order_line_items_grid_grid_columns_tax_inline_edit %}
            <mt-number-field
                v-if="isInlineEdit && showTaxRulesInlineEdit(item)"
                key="order-line-item-tax-edit-default"
                v-model="item.priceDefinition.taxRules[0].taxRate"
                name="sw-field--item-priceDefinition-taxRules[0]-taxRate"
                size="small"
                placeholder="0"
                number-align-end
            />
            {% endblock %}

            {% block sw_order_line_items_grid_grid_columns_tax_content_tooltip %}
            <span
                v-else-if="hasMultipleTaxes(item)"
                v-tooltip="tooltipTaxDetail(item)"
                class="sw-order-line-items-grid__item-tax-tooltip"
            >
                {{ showTaxValue(item) }}
            </span>
            {% endblock %}

            {% block sw_order_line_items_grid_grid_columns_tax_content %}
            <span v-else-if="item.price && item.price.taxRules.length">
                {{ showTaxValue(item) }}
            </span>
            {% endblock %}

        </template>
        {% endblock %}

        {% block sw_order_line_items_grid_grid_actions %}
        <template #actions="{ item, itemIndex }">
            {% block sw_order_line_items_grid_grid_actions_show %}
            <sw-context-menu-item
                :disabled="!isProductItem(item) || undefined"
                :router-link="{ name: 'sw.product.detail', params: { id: item.productId } }"
            >

                {% block sw_order_line_items_grid_grid_actions_show_label %}
                {{ $tc('sw-order.detailBase.contextMenuShowProduct') }}
                {% endblock %}

            </sw-context-menu-item>
            {% endblock %}

            {% block sw_order_line_items_grid_grid_actions_extension %}{% endblock %}

            {% block sw_order_line_items_grid_grid_actions_delete %}
            <sw-context-menu-item
                v-tooltip.left="{
                    message: $tc('sw-privileges.tooltip.warning'),
                    disabled: editable,
                    showOnDisabledElements: true
                }"
                variant="danger"
                class="sw_order_line_items_grid-item__delete-action"
                :disabled="!editable || undefined"
                @click="onDeleteItem(item, itemIndex)"
            >
                {% block sw_order_line_items_grid_grid_actions_delete_label %}
                {{ $tc('sw-order.detailBase.contextMenuDelete') }}
                {% endblock %}

            </sw-context-menu-item>
            {% endblock %}

        </template>
        {% endblock %}

        {% block sw_order_line_items_grid_grid_actions_modals %}
        <template #action-modals="{ item }">
            {% block sw_order_line_items_grid_grid_actions_modals_items %}{% endblock %}
            <sw-modal
                v-if="showDeleteModal === item.id"
                class="sw-order-line-items-grid__delete-item-modal"
                :title="$tc('global.default.warning')"
                variant="small"
                @modal-close="onCloseDeleteModal"
            >
                <p class="sw-order-list__confirm-delete-text">
                    {{ $tc('sw-order.detailBase.textDeleteLineItemConfirm', { label: `${item.label}` }, 0) }}
                </p>

                <template #modal-footer>
                    <mt-button
                        size="small"
                        class="sw_order_line_items_grid-actions_modal__close-action"
                        variant="secondary"
                        @click="onCloseDeleteModal"
                    >
                        {{ $tc('global.default.cancel') }}
                    </mt-button>

                    <mt-button
                        variant="critical"
                        size="small"

                        class="sw_order_line_items_grid-actions_modal__confirm-action"
                        @click="onConfirmDelete(item.id)"
                    >
                        {{ $tc('global.default.delete') }}
                    </mt-button>
                </template>
            </sw-modal>
        </template>
        {% endblock %}

        {% block sw_order_line_items_grid_bulk_actions %}
        <template #bulk>

            {% block sw_order_line_items_grid_bulk_actions_delete %}
            <a
                class="link link-danger"
                role="link"
                tabindex="0"
                @click="onDeleteSelectedItems"
                @keydown.enter="onDeleteSelectedItems"
            >
                {{ $tc('global.default.delete') }}
            </a>
            {% endblock %}

            {% block sw_order_line_items_grid_bulk_actions_extension %}{% endblock %}
        </template>
        {% endblock %}
        {% endblock %}

    </sw-data-grid>
    {% endblock %}

    {% block sw_order_line_items_nested_line_item_modal %}
    <sw-order-nested-line-items-modal
        v-if="nestedLineItemsModal"
        :line-item="nestedLineItemsModal"
        :order="order"
        @modal-close="closeNestedLineItemsModal"
    />
    {% endblock %}

</sw-container>
{% endblock %}
